<template>
	<view class="page" v-show="types">
		<view class="fw" @click="addsiji">增加司机</view>
		<view class="fw" @click="getcdxx">查看车队信息</view>
		<view class="fw" @click="getclxinxi">查看车辆信息</view>

		<view v-show="clxx" class="ck">
			<view
				style="background-color: #3c77b7;color: #ffffff;height: 40px;text-align: center;line-height: 40px;font-size: 20px;">
				车辆信息</view>
			<view style="height: 50px;overflow: hidden;">
				<view style="float: left;height: 50px;width: 20%;text-align: center;line-height: 50px;font-size: 20px;">
					车牌：</view>
				<view style="float: left;width: 50%;border-bottom: 5px solid #3c77b7;height: 50px;">
					<input type="text" v-model="cp" style="height: 50px;font-size: 20px;line-height: 70px;" />
				</view>
				<view style="float: left;height: 50px;width: 28%;">
					<view @click="cpseach"
						style="width: 80%;background-color: #3c77b7;color: #ffffff;height: 45px;margin:5px 5px;text-align: center;line-height: 45px;font-size: 20px;border-radius: 10px;">
						查询</view>
				</view>
			</view>
			<view style="border: 1px solid #3c77b7;overflow: auto;height: 300px;margin-top: 10px;">
				<view v-for="item in cplist" @click="clxz(item)" :key="item.id" class="clf1"
					:class="{itv:cur1==item.id,'itv2':item.blackname==2}">
					<view class="cls">{{item.char1}}</view>
					<view class="cls">洗车次数：{{item.xcnum}}</view>
				</view>
			</view>
			<view @click="gbclxx"
				style="font-size: 20px;text-align: center;height: 40px;line-height: 40px;background-color: #ff0000;font-weight: 600;color: #ffffff;">
				关闭</view>
		</view>
		<view v-show="cdxx" class="ck" style="border: 1px solid #3c77b7;">
			<view
				style="background-color: #3c77b7;color: #ffffff;height: 40px;text-align: center;line-height: 40px;font-size: 20px;">
				车队信息</view>
			<view style="height: 50px;overflow: hidden;">
				<view style="float: left;height: 50px;width: 20%;text-align: center;line-height: 70px;font-size: 20px;">
					姓名：</view>
				<view style="float: left;height: 50px;width: 40%;border-bottom: 3px solid #3c77b7;">
					<input type="text" v-model="xm" style="font-size: 20px;margin-top: 20px;" />
				</view>
				<view style="float: left;height: 50px;width: 20%;">
					<view @click="xmseach"
						style="width: 80%;background-color: #3c77b7;color: #ffffff;height: 45px;margin:5px 5px;text-align: center;line-height: 45px;font-size: 20px;border-radius: 10px;">
						查询</view>
				</view>
				<view style="float: left;height: 50px;width: 20%;">
					<view @click="scsj"
						style="width: 80%;background-color: #ff0000;color: #ffffff;height: 45px;margin:5px 5px;text-align: center;line-height: 45px;font-size: 20px;border-radius: 10px;">
						删除</view>
				</view>
			</view>
			<view style="border: 1px solid #3c77b7;overflow: auto;height: 300px;margin-top: 10px;">
				<view v-for="item in xmlist" @click="xmxz(item)" :key="item.id" class="clf1"
					:class="{itv:cur2==item.id}">
					<view class="cls" style="font-size: 18px;">姓名：{{item.cname}}</view>
					<view class="cls" style="font-size: 18px;">手机号：{{item.phone}}</view>
				</view>
			</view>
			<view @click="gbcdxx"
				style="font-size: 20px;text-align: center;height: 40px;line-height: 40px;background-color: #ff0000;font-weight: 600;color: #ffffff;">
				关闭</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cdgl",
		props: {
			types: {
				type: Boolean,
				default: false,
				required: true
			},
			uid: {
				type: String
			}
		},
		data() {
			return {
				uinfo: '',
				clxx: false,
				cdxx: false,
				cp: '',
				cpinfo: '',
				xm: '',
				cplist: [],
				cur1: '',
				cur2: '',
				xmlist: [],
				xminfo: '',
			};
		},
		created() {
			this.getuserinfo();
		},
		methods: {
			xmseach() {
				this.getcarlist()
			},
			clxz(e) {
				if (e.blackname == 2) {
					uni.showToast({
						title: '当前车牌是黑名单',
						icon: "none",
						duration: 2000
					});
					return false;
				} else {
					console.log(e)
					this.cur1 = e.id
				}

			},
			xmxz(e) {
				this.cur2 = e.id
				this.xminfo = e
			},
			cpseach() {
				this.getcpcdlist();
			},
			gbclxx() {
				this.clxx = false
			},
			getclxinxi() {
				this.clxx = true
			},
			getcdxx() {
				this.cdxx = true
			},
			gbcdxx() {
				this.cdxx = false
			},
			scsj() {
				let that = this
				uni.showModal({
					title: '是否删除当前司机',
					content: '取消授权',
					success: function(res) {
						if (res.confirm) {
							that.outcd()
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},


			async outcd() {
				let data = {
					uid: this.xminfo.id,
					cdid: this.xminfo.cdid
				}
				let res = await this.$api.outcd(data)
				if (res.data.code == 0) {
					this.getcarlist()
				}
			},
			async getuserinfo() {
				let data = {
					id: this.uid
					// id:uni.getStorageSync('uid'),
				}
				let res = await this.$api.getuserinfo(data)
				console.log(res.data.code)
				if (res.data.code == 0) {
					this.uinfo = res.data.data
					uni.setStorageSync('uid', res.data.data.id);
					uni.setStorageSync('cdtype', res.data.data.cdtype);
					this.getcpcdlist();
					this.getcarlist();
				}
			},
			async getcarlist() {
				let data = {
					cdid: this.uinfo.cdid,
					cname: this.xm,
					cdtype: 1
				}
				let res = await this.$api.getcarlist(data)
				if (res.data.code == 0) {
					this.xmlist = res.data.data
				}
			},
			async getcpcdlist() {
				let data = {
					cdid: this.uinfo.cdid,
					cpnames: this.cp
				}
				let res = await this.$api.getcpcdlist(data)
				if (res.data.code == 0) {
					this.cplist = res.data.data
				}
			},
			getcdsjlist() {
				let cdid = this.uinfo.cdid
				uni.navigateTo({
					url: '/pages/getcdsjlist/getcdsjlist?cdid=' + cdid
				})
			},
			//增加司机
			addsiji() {
				let cdid = this.uinfo.cdid
				uni.navigateTo({
					url: '/pages/addsiji/addsiji?cdid=' + cdid
				})
				// uni.navigateTo({
				// 	url:'/pages/addNews/addsjiinfo?cdid='+cdid+'&times=1655289999'
				// })
			},
		}

	}
</script>

<style lang="less" scoped>
	.page {
		background-color: #FFFFFF;
	}

	.fw {
		width: 600upx;
		height: 100upx;
		border: 1upx solid #3c77b7;
		text-align: center;
		line-height: 100upx;
		margin: 0 auto;
		margin-top: 30upx;
		font-size: 40upx;
		color: #3c77b7;
	}

	.ck {
		z-index: 999;
		-moz-opacity: 1;
		opacity: 1;
		position: fixed;
		background-color: #ffffff;
		width: 90%;
		border-radius: 5px;
		left: 50%;
		top: 45%;
		transform: translate(-50%, -50%);
	}

	.clf1 {
		height: 70px;
		border: 3px solid #3c77b7;
		width: 90%;
		// float: left;
		margin: 0 auto;
		margin-top: 10px;
		border-radius: 10px;
		text-align: center;
	}

	.cls {
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 18px;
	}

	.itv {
		background-color: #3c77b7;
		color: #FFFFFF;
	}

	.itv2 {
		background-color: #000102;
		color: #ffffff;
	}
</style>